<template>
  <div id="Financial" v-loading="loading">
    <div class="setup">
      <div class="content">
        <div class="header">创建账套</div>
        <div class="contentItem">
          <div class="pos" @click="$router.push({ name: 'notice' })">建账须知</div>
          <el-form :model="Information" :rules="rules" ref="Information" label-width="100px" class="demo-ruleForm">
            <el-radio-group class="radiogroup" v-model="Information.accountType">
              <el-radio :label="0" :disabled="Import">创建账套</el-radio>
              <el-radio :label="1" :disabled="Import">克隆账套</el-radio>
              <el-radio :label="2">导入账套</el-radio>
            </el-radio-group>
            <el-form-item label="公司名称:">
              <span style="color: #606266">{{ abbreviationName }}</span>
            </el-form-item>
            <el-form-item label="启用年月:" v-show="Information.accountType != 2" prop="startYm">
              <el-date-picker type="month" placeholder="选择月" format="yyyy年MM月" value-format="yyyy-MM" v-model="Information.startYm"></el-date-picker>
            </el-form-item>
            <el-form-item label="会计制度:" v-show="Information.accountType == 0" prop="accountingSystemId">
              <el-select v-model="Information.accountingSystemId" filterable>
                <el-option v-for="item in codePreSets" :key="item.id" :label="item.systemName" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="克隆账套:" v-show="Information.accountType == 1" prop="cloneAccountId" placeholder="请选择克隆账套">
              <el-select v-model="Information.cloneAccountId" filterable>
                <el-option v-for="item in cloneZtInfos" :key="item.accountId" :label="item.subName" :value="item.accountId"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所属行业:" v-show="Information.accountType != 2" prop="industryid" placeholder="请选择所属行业">
              <el-select v-model="Information.industryid" filterable>
                <el-option v-for="item in customerIndusts" :key="item.id" :label="item.industryName" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-show="Information.accountType == 2" label="一键式导入:">
              <span class="redColorFont">由升级工具直接升级的xml文件</span>
              <el-button type="primary" style="display: block; margin-top: 5px" round @click="Oneclickimport">一键式导入</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="footerBtn">
          <el-button @click="back" style="margin-right: 30px" round>返 回</el-button>
          <el-button type="primary" v-show="Information.accountType != 2" :loading="isConfirmLoading" @click="confirmFun" round>确 定</el-button>
        </div>
      </div>
    </div>
    <!-- 财务一键式导入 -->
    <el-dialog title="财务一键式导入" v-if="Visiblenel" :visible.sync="Visiblenel" :close-on-click-modal="false" :before-close="close" class="Visiblenel">
      <iframe style="border: 0" width="100%" height="100%" scrolling="no" :src="iframeSrc"></iframe>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import common from "./mixins/common";
export default {
  name: "Financial",
  data() {
    return {
      isShow: 0, //是否有账套 1 2
      loading: false,
      Information: {
        accountType: 0,
        accountingSystemId: "",
        cloneAccountId: "",
        startYm: "",
        industryid: "",
      },
      isConfirmLoading: false,
      Visiblenel: false,
      iframeSrc: null,
      abbreviationName: "",
      subid: "",
      codePreSets: [],
      customerIndusts: [],
      cloneZtInfos: [],
      Import: false,
      rules: {
        startYm: [{ required: true, message: "请选择月份", trigger: "change" }],
        accountingSystemId: [{ required: true, message: "请选择会计制度", trigger: "change" }],
        cloneAccountId: [{ required: true, message: "请选择克隆账套", trigger: "change" }],
        industryid: [{ required: true, message: "请选择所属行业", trigger: "change" }],
      },
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.common.userInfo,
    }),
  },
  methods: {
    back() {
      this.$router.push({ name: "cancelAccountContainer", query: { isGetData: false } });
    },
    close() {
      this.Visiblenel = false;
      // this.RegExistAccount(); // 2022-03-25 导入弹框关闭后不校验是否有账套
    },
    confirmFun() {
      this.$refs.Information.validate((valid) => {
        this.addAccountSet();
      });
    },
    addAccountSet() {
      // 新增|克隆账套
      let params = {
        ...this.Information,
        subid: this.subid,
      };
      if (!params.startYm || !params.industryid || params.accountType == 0 && !params.accountingSystemId || params.accountType == 1 && !params.cloneAccountId) {
        return;
      }
      let industry = this.customerIndusts.find((item) => {
        return item.id == params.industryid;
      });
      params.industryName = industry.industryName;
      params.accountName = this.abbreviationName;
      if (params.accountType == 0) {
        delete params.cloneAccountId;
        let accounting = this.codePreSets.find((item) => {
          return item.id == params.accountingSystemId;
        });
        params.accountingSystemName = accounting.systemName;
      } else {
        delete params.accountingSystemId;
      }
      this.loading = true;
      this.isConfirmLoading = true;
      params.accountName = this.abbreviationName;
      this.$api.companyInfo
        .AddAccount(params)
        .then((res) => {
          this.isConfirmLoading = false;
          this.loading = false;
          if (res.data.status == 200) {
            this.$message({ message: params.accountType == 0 ? "创建成功" : "克隆成功", type: "success" });
            this.RegExistAccount();
          }
        })
        .catch(() => {
          this.isConfirmLoading = false;
          this.loading = false;
        });
    },
    RegExistAccount() {
      // 查询账套id
      let params = {
        subid: this.subid,
      };
      this.$api.companyInfo.RegExistAccount(params).then((res) => {
        if (res.data.data) {
          this.Entertheaccount(res.data.data.accountid, this.subid);
        }
      });
    },

    Marxist() {
      // 获取账套添加需要的信息
      this.$api.accountPort.GetSelectSystemList().then((res) => {
        let resData = [];
        res.data.data.map((item) => {
          if (this.userInfo.smallType == 3) {
            if (item.systemName != "小企业会计准则(2013智能做账)") {
              resData.push(item);
            }
          } else {
            resData.push(item);
          }
        });
        this.codePreSets = resData;
      });
      this.$api.accountPort.GetSelectIndustryList().then((res) => {
        this.customerIndusts = res.data.data;
      });
      this.$api.companyInfo.GetSelectCompanyNameList().then((res) => {
        this.cloneZtInfos = res.data.data;
      });
    },
  },
  created() {
    let query = this.$route.query;
    this.subid = query.subid;
    this.abbreviationName = query.abbreviationName;
    this.Marxist();
    if (query.Import) {
      this.Import = true;
      this.Information.accountType = 2;
    }
  },
  mixins: [common],
};
</script>
<style lang="less">
#Financial {
  width: 100%;
  height: 100%;
  .setup {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    margin: 10px;
    background-color: #fff;
    .content {
      margin: auto;
      position: relative;
      top: 15%;
      .header {
        color: #638cfb;
        width: 100%;
        text-align: center;
        font-size: 32px;
        font-weight: bold;
        margin-bottom: 3%;
      }
      .contentItem {
        width: 40%;
        max-width: 700px;
        min-width: 600px;
        height: 300px;
        border: 1px solid #d8dbe6;
        margin: auto;
        position: relative;
        .pos {
          position: absolute;
          font-size: 16px;
          color: #f49922;
          top: 25px;
          right: 20px;
          text-decoration: underline;
          cursor: pointer;
          z-index: 999;
        }
        .radiogroup {
          position: relative;
          width: 100%;
          text-align: center;
          height: 80px;
          line-height: 80px;
          // .pos {
          //   width: 100px;
          //   position: absolute;
          //   top: 0;
          //   right: 0;
          // }
        }
        .demo-ruleForm {
          .el-select,
          .el-date-editor {
            width: 50%;
            min-width: 260px;
          }
        }
      }
      .footerBtn {
        width: 100%;
        height: 100px;
        line-height: 100px;
        text-align: center;
      }
    }
  }
  .account {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
}
.Visiblenel {
  .el-dialog__body {
    height: 450px;
  }
}
@media screen and (min-height: 0) and (max-height: 549px) {
  #Financial .setup .content {
    top: 5%;
    .header {
      font-size: 28px;
      margin-bottom: 2%;
    }
    .footerBtn {
      height: 60px;
      line-height: 60px;
    }
  }
}
@media screen and (min-height: 550px) and (max-height: 599px) {
  #Financial .setup .content {
    top: 10%;
    .header {
      font-size: 30px;
      margin-bottom: 2%;
    }
    .footerBtn {
      height: 80px;
      line-height: 80px;
    }
  }
}
@media screen and (min-height: 600px) and (max-height: 730px) {
  #Financial .setup .content {
    top: 12%;
    .header {
      font-size: 31px;
    }
  }
}
</style>
